<template>
  <div class="home">
    <!-- <mindmap v-model="data"></mindmap> -->
    <div class="box">
      <mindmap id="mindmap" v-model="mindData" height="500"></mindmap>
      <!-- :zoomable="false" -->
    </div>
    <!-- style="width: 1200px; height: 600px; margin: 0 auto"
      :strokeWidth="2"
      :xSpacing="20"
      :ySpacing="10"
      :gps="false"
      :fitView="true"
      :zoomable="false"
      :download="false"
      :contextMenu="false"
      :showUndo="false"
      :keyboard="false"
      :draggable="false"
      :showNodeAdd="false" -->
  </div>
</template>

<script>
// @ is an alias to /src
import mindmap from '@hellowuxin/mindmap'
export default {
  name: "Home",
  components: {
    mindmap,
  },
  data () {
    return {
      mindData: [{
        "name": "如何学习D3",
        "children": [
          {
            "name": "预备知识",
            "children": [
              { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }
            ]
          },
          {
            "name": "安装",
            "children": [
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }, { "name": "HTML & CSS" },
              { "name": "JavaScript" }
            ]
          },
          {
            "name": "进阶",
            "left": true
          }
        ]
      }]
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  height: 600px;
  background-color: #192035;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ div#mindmap svg {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  outline: none;
  background-color: #192035;
}
</style>
